/**
 * 代码组头部
 */

import React from 'react';
import { ENUM } from 'utils/constants.js';
import { Balloon, Tag, Dropdown, Menu } from '@teamix/ui';
import { ButtonIcon, Header } from '@alife/devops-ui';

import './index.scss';
import AddBtn from './btn';
import RepoAdvancedSearch from 'components/repoAdvancedSearch';
import intl from '../../../../../../../../locale';

const { Tooltip } = Balloon;
const { pathResource } = window.FORCE;
const { visibility_levels } = ENUM;

export default class GroupRepoOverviewInfo extends React.Component {
  filterLevel = (level) => {
    let label = '';
    visibility_levels.forEach((item) => {
      if (item.value === Number(level)) {
        label = item.label;
      }
    });
    return label;
  };

  closeModal = (type) => {
    this.setState({
      [type]: false,
    });
  };

  handleSort = (keys) => {
    this.props.updateData({
      order_by: keys[0],
    });

    this.props.getGroups(1);
  };

  render() {
    const {
      groupList,
      groupInfo,
      order_by,
      hasGroupAccess,
      openModal,
      hasProjectAccess,
      create_repo,
    } = this.props;
    let fullName = '';

    const arr = pathResource.fullName.split('/');
    const { length } = arr;
    fullName = arr[length - 1] ? arr[length - 1].trim() : '';

    return (
      <Header
        // className="group-overview-info"
        title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Tooltip
              trigger={<div className="group-overview-info-title">{fullName}</div>}
              align="t"
            >
              {fullName}
            </Tooltip>
            <div className="group-overview-info-infobar">
              <Tag size="small" className="group-overview-info-lever">
                {this.filterLevel(groupInfo.visibility_level)}
              </Tag>
              {pathResource.role === 'ORG_MEMBER' ||
              pathResource.role === 'InDepartmentOpen' ? null : (
                <Tag size="small">{ENUM.role[pathResource.role]}</Tag>
              )}

              {!groupInfo.description ? null : (
                <Tooltip trigger={<ButtonIcon name="information-line" style={{ marginLeft: 4 }} />}>
                  {
                    <div>
                      <div className="desc-popup-item-label">
                        {intl.get({
                          id: 'code-assets.containers.title.Description',
                          defaultMessage: '描述',
                        })}
                      </div>
                      {groupInfo.description}
                    </div>
                  }
                </Tooltip>
              )}
            </div>
          </div>
        }
        operation={
          <>
            <RepoAdvancedSearch
              archived={this.props.archived_repository}
              onSearch={(data) => {
                this.props.updateData({
                  archived_repository: data.archived,
                });

                this.props.getGroups(1);
              }}
            />

            <Dropdown trigger={<ButtonIcon name="sort-line" />} triggerType="click" align="tr br">
              <Menu onSelect={this.handleSort} selectMode="single" selectedKeys={order_by}>
                <Menu.Item key="updated_at">
                  {intl.get({
                    id: 'code-assets.containers.title.UpdateTime',
                    defaultMessage: '更新时间',
                  })}
                </Menu.Item>
                <Menu.Item key="created_at">
                  {intl.get({
                    id: 'code-assets.containers.title.Created',
                    defaultMessage: '创建时间',
                  })}
                </Menu.Item>
              </Menu>
            </Dropdown>
            {groupList.length ? (
              <span>
                <AddBtn
                  hasGroupAccess={hasGroupAccess}
                  hasProjectAccess={hasProjectAccess}
                  openModal={openModal}
                  message={create_repo.message}
                  isListEmpty={false}
                />
              </span>
            ) : null}
          </>
        }
      />
    );
  }
}
